<template>
    <div style="width:1280px;height:30px;background-color:skyblue;margin:80px auto">
        <ul id="nav">
            <li>
                <a>首页</a>  
            </li>
            <li>
                <a>医疗机构</a>
                <ul>
                    <li v-for="m in medicalInstitutions"
                     :key="m.id"
                     @click='goMedicalOne(m)'
                     ><a>{{m.title}}</a></li>
                </ul>
            </li>
            <li>
                <a @click="goNurse">护工平台</a>
            </li>
            <li>
                <a @click="goDrug()">药品</a>
            </li>
            <li>
                <a @click="goCareSurvey">照护服务调查</a>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name:'Tabbar',
        data(){
            return{
                medicalInstitutions:[
                    {id:1,title:'福州市'},{id:2,title:'厦门市'},
                    {id:3,title:'泉州市'},{id:4,title:'漳州市'},
                    {id:5,title:'宁德市'},{id:6,title:'三明市'},
                    {id:7,title:'南平市'},{id:8,title:'龙岩市'}]
            }
        },
        methods: {
            goMedicalOne(m){
                this.$store.state.city = m.title
                this.$router.push({
                    name:'medicalInstitution'
                })
            },
            goDrug(){
                this.$router.push({
                    name:'drugs',
                })
            },
            goNurse(){
                this.$router.push({
                    name:'nursingPlatform'
                })
            },
            goCareSurvey(){
                this.$router.push({
                    name:'satisfaction'
                })
            }
        }
        
    }
</script>

<style>
        #nav{  
        width:100%;
        height:100%;
        color:white;
        font-size:18px;
        font-family:NSimSun;
        margin-left: -40px;
        }
        #nav li{
            list-style-type:none;
            float:left;
            width:255px;
            text-align:center;
            padding-top:5px;
            padding-bottom:5px;
            border-left:1px solid white;
            position:relative;
            cursor:pointer;
        }
        #nav li a{
            text-decoration:none;
            color:white;
        }
        #nav li a:hover{
            color:#ff9933;
        }
        #nav li ul{
            display:none;
            position:absolute;
            top:30px;
            left:-40px;
        }
        #nav li:hover ul{
            display:block
        }
        #nav li ul li{
            background-color:skyblue;
            border-left:none;
            border-top:1px solid white;
            float:none;
            cursor:pointer;
        }
</style>